<template>
	<view class="pop-info-wrap">
		<!-- 弹窗 头像昵称填写 -->
		<u-popup ref="popup_avatar_nick" :show="show_avatar_nick" :overlay="true" mode="bottom" :closeable="false"
			:closeOnClickOverlay="false" bgColor="#ffffff" round=0 @close="handleClose" @open="handleOpen">


			<view class="info-modal-wrap">
				<view class="info-modal-inner">
					<view class="modal-head flex-between">
						<view class="title-box flex">
							<image src="@/static/login/pop-logo.png" mode="" class="pop-logo">
							</image>
							<text>
								<!-- 崔工工具 -->
								{{vuex_config.comTitle}}
								</text>
						</view>
						<view class="close-box">
							<image src="@/static/login/close.png" mode="" class="modal-close" @click="close_pop()">
							</image>
						</view>
					</view>

					<view class="modal-ctx">
						<view class="main-title">
							请完善您的基本信息
						</view>
						<view class="form-box">
							<view class="form-item" style="padding-bottom: 24rpx;">
								<view class="item-mask">

									<!-- #ifdef WEB -->
									<button class="btn-mask" open-type="" @click="doUploadAvatar()"></button>
									<!-- #endif -->

									<!-- #ifndef WEB -->
									<button class="btn-mask" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
									<!-- #endif -->

								</view>
								<view class="label">
									头像
								</view>
								<view class="val">
									<view class="avatar-box">
										<image v-if="user.image" :src="user.image" class="avatar-image" mode="aspectFill">
										</image>
										<image v-else src="@/static/common/avatar.png" class="avatar-image" mode="aspectFill"></image>
									</view>
								</view>
								<view class="arrow-box">
									<image src="@/static/login/pop-arrow.png" mode="" class="">
									</image>
								</view>
							</view>
							<view class="form-item">
								<view class="label">
									昵称
								</view>
								<view class="val">
									<input v-model="user.nickname" class="input-nick" type="nickname" @blur="handleGetNick" 
										placeholder="输入昵称" placeholder-class="input-p" />
								</view>
							</view>
						</view>
						<view class="btn-submit flex-center" @click="submit_avatar_nick()">
							保存
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 弹窗 头像昵称填写 -->
	</view>
</template>


<script>
	import util from '@/plugin/util.js'

	export default {
		components: {

		},
		data() {
			return {
				user: {
					image: '',
					nickname: '',
				},
				show_avatar_nick: false,
			}
		},
		watch: {

		},
		methods: {
			init() {
				this.user.image = this.mix_user_origin_avatar
				this.user.nickname = this.mix_user_nick

				this.show_avatar_nick = true;
			},

			handleClose() {},
			handleOpen() {},

			//处理头像
			onChooseAvatar(e) {
				console.log('头像获取', e);
				let file = e.detail.avatarUrl;

				this.$apiUpload({
					url: '/service.php',
					method: 'post',
					data: {
						action: 'index_localUpload', //login
						img: file,
						// if_touxiang: 1
					},
				}).then(res => {
					if (res.code == 200) {
						let path = res.data;
						this.user.image = path;
						this.edit_avatar_nick(path);
					}
				});
			},


			// 本地上传
			doUploadAvatar() {
				// util.handleUploadImage({
				// 	count: 1,
				// 	fileKey: 'img',
				// 	data: {
				// 		if_touxiang: 1,
				// 	},
				// 	successCallback: (res) => {
				// 		console.log('successCallback res', res)
				// 		let path = res.data;
				// 	}
				// });

				uni.chooseImage({
					count: 1,
					mediaType: ['image'], // 图片
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 从相册选择
					success: (res) => {
						console.warn('选择图片', res)
						res.tempFilePaths.forEach(file => {
							this.$apiUpload({
								url: '/service.php',
								method: 'post',
								data: {
									action: 'index_localUpload',
									img: file,
									// if_touxiang: 1,
									// ...option.data
								},
							}).then(res => {
								if (res.code == 200) {
									// option.successCallback(res)
									let path = res.data;
									this.user.avatar = path;
								}
							});
						})
					}
				});

			},


			//提交头像昵称
			edit_avatar_nick(image) {
				var parmas = {
					image: image,
					// nickname: '',
				}
				this.$api({
					url: '/service.php',
					method: 'post',
					data: {
						action: 'users_editInfo',
						...parmas
					},
				}).then(res => {
					this.$logjson('users_editInfo', res)
					if (res.code == 200) {
						this.$store.commit('edit_vuex_user', parmas);
					}
				})
			},

			//昵称
			handleGetNick(e) {
				console.log('昵称获取', e);
				this.user.nickname = e.detail.value;
			},

			//提交头像昵称
			submit_avatar_nick() {
				var parmas = {
					image: this.user.avatar,
					nickname: this.user.nickname
				}
				if (!parmas.image) {
					this.$alert("请设置头像");
					return
				}
				if (!parmas.nickname) {
					this.$alert("请填写昵称");
					return
				}

				this.$api({
					url: '/service.php',
					method: 'post',
					data: {
						action: 'users_editInfo',
						...parmas
					},
				}).then(res => {
					this.$logjson('users_editInfo', res)
					if (res.code == 200) {
						this.$store.commit('edit_vuex_user', {
							...parmas,
							name: parmas.nickname
						});
						// this.getInfo();
						this.show_avatar_nick = false;
						this.$emit('confirm')
					}
				})
			},

			//完善资料后更新信息
			close_pop() {
				this.show_avatar_nick = false;
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 用户完善头像昵称弹窗

	.pop-info-wrap {
		// position: relative;
		// z-index: 100;
	}


	.info-modal-wrap {
		background: #F8F8F8;
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 32rpx;
		// padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

		.info-modal-inner {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 60rpx 46rpx;
			padding-bottom: 20rpx;
			min-height: 600rpx;
			background: #F8F8F8;
		}
	}



	.modal-head {
		.title-box {
			image {
				width: 44rpx;
				height: 44rpx;
			}

			text {
				margin-left: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
		}

		.close-box {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}


	.modal-ctx {
		width: 100%;
		background: #F8F8F8;
		padding: 0;
		align-items: left;
		padding-top: 38rpx;


		.main-title {
			text-align: left;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.form-box {
			padding-top: 58rpx;

			.form-item {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				min-height: 96rpx;
				border-bottom: 2rpx solid #DCDCDC;

				.item-mask {
					position: absolute;
					z-index: 2;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					opacity: 0;

					.btn-mask {
						display: flex;
						width: 100%;
						height: 100%;
					}
				}

				.label {
					width: fit-content;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

				.val {
					flex: 1;
					overflow: hidden;
					padding-left: 40rpx;


					input {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #000;
					}

					.input-p {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #828282;
					}
				}

				.arrow-box {
					position: absolute;
					right: 0;

					image {
						width: 13rpx;
						height: 22rpx;
					}
				}

				.avatar-box {
					width: 80rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 80rpx;
						height: 80rpx;

					}
				}
			}

		}




		.btn-submit {
			margin-top: 64rpx;
			width: 100%;

			height: 80rpx;
			background: #CB0011;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;

		}
	}

	// 用户完善头像昵称弹窗


	.footer-terms {
		margin-top: 40rpx;
		margin-top: 16rpx;
		// position: fixed;
		// left: 0;
		// bottom: 88rpx;
		text-align: center;
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 34rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666;


		.terms-box {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;

			.image-check {
				margin-right: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}



		.agreement_info {
			color: #fff;
			color: #004281;
		}
	}
</style>